@mixin xin{
    width: 1090px;
    height: 100%;
    margin: 0 auto;
}
@mixin  clear {
    content:"";  
    height:0;  
    visibility:hidden;  
    display:block;  
    clear:both;  
    
}

.detail{
    // background-color: #f5f5f5;
    padding-bottom: 30px;
    .opacityBottom{
        width: 100%;
        height: 100%;
        position: fixed;
       background-color: rgba(0, 0, 0, 0.6);
        z-index: 1000;
        top: 0px;
        left: 0px;
        // visibility: hidden;
        .img1{
            position: relative;
            img{
                width: 500px;
                height: 500px;
            }
            span{
                display: inline-block;
                position: absolute;
                width: 40px;
                height: 40px;
                vertical-align: top;
                background-color: white;
                color: black;
                font-size: 30px;
                font-weight: 800;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .left,.right{
            position: absolute;
            width: 30px;
            height: 100px;
            // background-color: white;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            color: white;
            cursor: pointer;

            transform: translate(-50%,-50%);
        }
        .left{
            top: 50%;
            left: -4%;
        }
        .right{
            top: 50%;
            left: 104%;
        }
    }
    .detail_max{
        @include xin();
        .header_detail{
            font-size: 12px;
    color: #333;
    line-height: 1;
    padding-top: 20px;
    padding-bottom: 20px;
        }
        .detail_min::after{
            @include clear();
        }
        .detail_min{
            background-color: white;
            padding-bottom: 60px;
            .detail_left{
                width: 430px;
                float: left;
                position: relative;
                .big_big_img{
                    width: 600px;
                    height: 600px;
                    position: absolute;
                    left: 431px;
                    top: 0px;
                    z-index: 2;
                    overflow: hidden;
                    visibility: hidden;
                    border: 1px solid #ccc;
                    img{
                        width: 800px;
                        height: 800px;
                            position: absolute;
                            left: 0px;
                            top: 0px;
                          
                        
                    }
                }
                .big_img{
                    display: block;
                    width: 428px;
                    height: 428px;
                    background-color: #f4f4f4;
                    img{
                        width: 428px;
                        height: 428px;
                    }
                    #sf {
                        width: 50px;
                        height: 50px;
                        background: orange;
                        opacity: 0.3;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        visibility: hidden;
                        cursor: move;
                      }
                }
                .min_img ul{
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0;
                    img{
                        width: 78px;
                        height: 78px;
                    }
                }

             }

             .detail_right{
                float:right;
                width: 625px;
                .detail_right1::after{
                    @include clear()
                }
                .text1{
                    width: 500px;
                    font-size: 20px;
                    font-weight: 800;

                }
                .text2 {
                    margin-left: 20px;
                }
                .text2 .span1{
                    font-size: 20px;
                    color: #e36844;

                }
                .text2 .span2{
                    font-size: 14px;

                }
                .detail_right1 div{
                    float: left;

                }
                .middon{
                    background-color: #f5f3ef;
                    border: 1px solid #f5f3ef;
                    margin-top: 20px;
                    .middon1,.middon2{
                        margin: 20px;
                        border-bottom: 1px dotted #ccc;
                        .span1{
                            font-size: 14px;
                            color: #ccc;
                            display: inline-block;
                            width: 80px;
                        }
                        p{
                            margin: 20px 0;
                        }
                        .jg{
                            font-size: 28px;
                            color: #d7282d;
                            font-weight: 600;
                        }
                        // .span2{
                        //     // margin-left: 20px;
                        // }
                    }
                    .middon2{
                        border-bottom: 1px none #ccc;
                    }
 
                }
                .shuliang>span{
                    font-size: 14px;
                    color: rgb(169, 169, 169);
                    display: inline-block;
                    width: 80px;
                }
                .shuliang{

                    margin-left: 20px;
                    margin-top: 20px;
                    .shuliangs{
                        display: inline-block;
                        margin-left: 50px;
                        input{
                            width: 60px;
                            height: 30px;
                            text-align: center;
                            outline: none;
                            border: 2px solid #ccc;
                        }
                        span{
                            width: 36px;
                            height: 32.5px;
                            font-size: 20px;
                            display: inline-block;
                            border: 2px solid #ccc;
                            position: relative;
                            top: 0.5px;
                            text-align: center;
                            line-height: 30px;
                            cursor: pointer;
                        }
                        .span_left{
                            left: 2px;
                        }
                        .span_right{
                            left: -1px;
                        }
                    }
                }
                .sub{
                    width: 346px;
                    height: 50px;
                    background-color: #b4a078;
                    text-align: center;
                    font-size: 20px;
                    line-height: 20px;
                    border: 0;
                    color: white; 
                    margin-left: 100px;
                    margin-top: 20px;

                }
                .sub:hover{
                    background-color: #d5be90;

                }

            }
            }
            }
            }